<template>
  <v-card class="student-card" variant="flat" elevation="0" hover :data-status="student.departure_status">
    <v-card-text class="pa-4">
      <!-- 学生基本信息 -->
      <div class="d-flex align-center mb-3">
        <v-avatar color="primary" size="48" class="me-3">
          <span class="text-white text-h6">{{ student.student_name.charAt(0) }}</span>
        </v-avatar>
        <div class="flex-grow-1">
          <div class="text-h6 font-weight-medium">{{ student.student_name }}</div>
          <div class="text-body-2 text-medium-emphasis">{{ student.student_no }}</div>
          <v-chip size="small" color="blue" variant="tonal" class="mt-1">
            {{ student.class_name }}
          </v-chip>
        </div>
      </div>

      <div class="mb-3">
        <div class="d-flex align-center mb-2" v-if="student.teacher_name">
          <v-icon size="16" class="me-2">mdi-account-tie</v-icon>
          <span class="text-body-2 me-2">负责教师:</span>
          <span class="text-body-2">{{ student.teacher_name }}</span>
        </div>
      </div>
    </v-card-text>
  </v-card>
</template>

<script setup>
// 组件属性
const props = defineProps({
  student: {
    type: Object,
    required: true
  },
  canModify: {
    type: Boolean,
    default: false
  }
})

// 事件定义
defineEmits(['mark-abnormal'])

// 状态颜色和文本方法
const getDepartureStatusColor = (status) => {
  switch (status) {
    case 'bus': return 'blue'
    case 'parent': return 'green'
    case 'aftercare': return 'purple'
    case 'special': return 'orange'
    case 'abnormal': return 'red'
    default: return 'grey'
  }
}

const getDepartureStatusText = (status) => {
  switch (status) {
    case 'bus': return '校车离园'
    case 'parent': return '家长接领'
    case 'aftercare': return '晚托班'
    case 'special': return '特色课程'
    case 'abnormal': return '异常'
    default: return '未知'
  }
}

// 时间格式化
const formatTime = (timestamp) => {
  if (!timestamp) return '--'
  return new Date(timestamp).toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit'
  })
}
</script>

<style scoped>
.student-card {
  transition: all 0.3s ease;
  border-radius: 12px;
  border: none !important;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.student-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
}

/* 根据离园状态设置背景颜色 - 简化版本 */
.student-card[data-status="bus"],
.student-card[data-status="parent"],
.student-card[data-status="aftercare"],
.student-card[data-status="special"] {
  background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
  color: #2e7d32;
}

.student-card[data-status="abnormal"] {
  background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
  color: #c62828;
}

.student-card[data-status=""],
.student-card:not([data-status]) {
  background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
  color: #757575;
}

.v-chip {
  font-weight: 500;
}
</style>